
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业提交</title>
<meta
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
	name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
	<link rel="stylesheet" href="../../ZY/css/ydui.css" />
	<link rel="stylesheet" href="../../ZY/css/mystyle.css" />

	<link rel="shortcut icon" href="favicon.ico"> <link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
	<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

	<link href="/css/animate.min.css" rel="stylesheet">
	<link href="/css/style.min.css?v=4.0.0" rel="stylesheet">
	<!-- Sweet Alert -->
	<link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

	<!--    <script src="/js/jquery.min.js?v=2.1.4"></script>-->
	<!--    <script src="/js/bootstrap.min.js?v=3.3.5"></script>-->
	<script src="/js/plugins/footable/footable.all.min.js"></script>
	<!--    <script src="/js/content.min.js?v=1.0.0"></script>-->

	<!--    <script src="/js/jquery.min.js?v=2.1.4"></script>-->
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/js/demo/peity-demo.min.js"></script>
	<script src="/js/plugins/gritter/jquery.gritter.min.js"></script>
	<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
	<!-- 自适应解决方案类库 -->
	<script src="../../ZY/js/ydui.flexible.js"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/js/demo/peity-demo.min.js"></script>
	<script src="/js/plugins/gritter/jquery.gritter.min.js"></script>
	<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
</head>
<body>
	<!-- header -->
	<header id="hd" class="m-navbar navbar-fixed" style="display:none">
		<a href="#" class="navbar-item"><i class="back-ico"></i></a>
		<div class="navbar-center">
			<span class="navbar-title">作业提交</span>
		</div>
	</header>
	<form action="../zy/submit" id="myForm">
		<!-- headerend -->
		<section class="g-flexview bgf3f headp_t">
			<div class="g-scrollview">
				<div class="frambox">
					<h2>请填写以下信息</h2>
					<div class="list_box">
						<div class="m-cell demo-small-pitch">
							<div class="cell-item">
								<div class="cell-left">*编号比赛名（例:A001涅槃重生）</div>
								<div class="cell-right">
									<input type="text"  id="userName" class="cell-input"  name="name" value="" autocomplete="off">
								</div>
							</div>
							<div class="cell-item">
								<div class="cell-left">*净资产(例:9999，单位：元)</div>
								<div class="cell-right">
									<input type="text" class="cell-input"  name="money"  value="" autocomplete="off">
								</div>
							</div>
							<div class="cell-item">
								<div class="cell-left">*持股明细(逗号隔开:圣龙股份,高新发展)</div>
								<div class="cell-right">
									<input type="text" class="cell-input"  name="stockDetail"  value="" autocomplete="off">
								</div>
							</div>
							<div class="cell-item">
								<div class="cell-left">当日转账明细(例：转出：-100，转入：100)</div>
								<div class="cell-right">
									<input type="text" class="cell-input"   name="outMoney" value="" autocomplete="off">
									<input type="hidden" id="ccmx" class="cell-input"   name="ccmx" value="" autocomplete="off">
									<input type="hidden" id="zzjl" class="cell-input"   name="zzjl" value="" autocomplete="off">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="frambox">
					<h2>上传图片(Iphone手机请双击 弹出上传！)</h2>
					<div class="font_box">
						<div class="m-grids-2">
							<a href="javascript:sfzzmSc();" class="grids-item">
								<div id="sfzzmImg" class="grids-icon">
									<img src="../../ZY/images/ccmx.png">
								</div>
								<div class="grids-txt">
									<span style="color: red;font-size:20px;">上传持仓记录</span>
								</div>
							</a>
							<input style="display: none" id="sfzzm" type="file" onchange="javascript:showpic(this,'sfzzmImg');"  accept="*" multiple />

							<a href="javascript:sfzfmSc();" class="grids-item">
								<div id="sfzfmImg" class="grids-icon">
									<img src="../../ZY/images/yzzz.png">
								</div>
								<div class="grids-txt">
									<span style="color: red;font-size:20px;">上传银证转账记录</span>
								</div>
							</a>
							<input style="display: none" id="sfzfm" type="file" onchange="javascript:showpic(this,'sfzfmImg');" accept="*" multiple />
						</div>
					</div>
				</div>
				<div class="btn_mian">
					<a   type="submit" href="javascript:nextSubmit();" class="btn btn-danger btnbom">提交</a>
				</div>

			</div>
			<!-- 点击图片放大区 -->
			<div id="outerdiv"
				style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; height: 100%; display: none;">
				<div id="innerdiv" style="position: absolute;">
					<img id="bigimg" style="border: 5px solid #fff;" src="" />
				</div>
			</div>

		</section>
	</form>
	<!-- 引入jQuery 2.0+ -->
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<!-- 引入YDUI脚本 -->
	<script src="../../ZY/js/ydui.js"></script>
	<script>
			! function($) {
				$("#hd").hide();
			}(jQuery);			
			function sfzzmSc(){//点击触发h5File类型上传，身份证正面
				$("#sfzzm").click();
			}
			function sfzfmSc(){//点击触发h5File类型上传，身份证反面
				$("#sfzfm").click();
			}
			function showBigPic(src){//点击图片放大,（目前图片包含于上传点集中，点击不到图片，所以不起效果，需要放大时自行修改html代码即可）
				imgShow("#outerdiv", "#innerdiv", "#bigimg", src.src);
			}
			function showpic(obj,id){//图片展示
				//var imgs = document.getElementById("sfzzmImg").getElementsByTagName("img");
				 for(var i = 0, file; file = obj.files[i]; i++){
					if(i>0){
						break;
					}
					var reader = new FileReader();
					reader.onload = function(e){//图片读取展示
						console.log(e);				
						var htmlimg='<img style="margin-left:2px;" id="'+e.timeStamp+'" class="min"  src="'+e.target.result+'" onclick="showBigPic(this)"/>';
						$("#"+id).html(htmlimg);
					} 
					reader.readAsDataURL(file);
				
				}
			}

			function nextSubmit(){
				//下一步
				var imgzm = document.getElementById("sfzzmImg").getElementsByTagName("img");
				var imgfm = document.getElementById("sfzfmImg").getElementsByTagName("img");
				var sfzzmBase64Data = compress(imgzm[0]);//可以用于后台读取的，正面base64数据
				$("#ccmx").val(sfzzmBase64Data);
				var sfzfmBase64Data = compress(imgfm[0]);//可以用于后台读取的，反面base64数据
				$("#zzjl").val(sfzfmBase64Data);
				handleClick()
				//	$("#myForm").submit();
			}
		</script>
	<script type="text/javascript">
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		function compress(img) {//上传信息时图片处理
			var initSize = img.src.length;
		    // 图片原始尺寸
		    var originWidth = img.width;
		    var originHeight = img.height;
		 // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
		    var maxWidth = 600,
		        maxHeight = 1100;
		    // 目标尺寸
		    var targetWidth = originWidth,
		        targetHeight = originHeight;
		    // 图片尺寸超过400x400的限制
		    if(originWidth > maxWidth || originHeight > maxHeight) {
		        if(originWidth / originHeight > maxWidth / maxHeight) {
		            // 更宽，按照宽度限定尺寸
		            targetWidth = maxWidth;
		            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
		        } else {
		            targetHeight = maxHeight;
		            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
		        }
		    }else{
		    	targetWidth=600;
		    	targetHeight=1100;
		    }
		    canvas.width = targetWidth;
		    canvas.height = targetHeight;
		    // 清除画布
		    ctx.clearRect(0, 0, targetWidth, targetHeight);
		    // 图片压缩
		    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
		    //进行最小压缩
		    var ndata = canvas.toDataURL("image/jpeg", 0.92);//此为图片base64数据，传至后台或保存数据库/或保存服务器都可以		 
		    return ndata;
		}

		/**
		 * 校验用户名称
		 * */
		function handleClick() {
			var userName = $("#userName").val();
			if (userName == null || userName == "") {
				swal({title: "请输入正确的用户名称", text: ""});
				document.getElementById("userName").focus();
			} else {
				$.ajax({
					url: '/zy/ajaxCheckUserName',
					type: "get",
					withCredentials: true,
					data: {"userName": userName},
					success: function (data) {
						var jsonData = JSON.parse(data);
						if(jsonData.msg == 'Success'){
							$("#myForm").submit();
						}else{
							swal({title: jsonData.msg, text: ""});
							document.getElementById("userName").focus();
						}
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						swal({title: "查询失败，请确定！", text: ""});
						document.getElementById("userName").focus();

					},
				});
			}
		}
		function sleep(n) {
			var start = new Date().getTime();
			while(true)  if(new Date().getTime()-start > n) break;
		}

	</script>
</body>
</html>